<template>
  <div class="change-class body-bg">
    <div v-if="!initLoading">
      <van-tabs :active="active" animated swipeable color="#00B7EE" @change="changeTabs">
        <van-tab title="购买记录">
          <scroll-view :scroll-y="true" enable-back-to-top lower-threshold="-50" class="scroll-height" @scrolltolower="lower" :scroll-top="0">
            <ul class="change-content" v-if="list.length">
              <li class="change-items" v-for="(item,index) in list" :key="index">
                <div class="middle">交易时间：{{item.dateTime}}</div>
                <div class="top">
                  <img class="head-img" :src="item.src" alt="头像">
                  <div class="class-infor">
                    <p class="class-name overflow-tow">{{item.title}}</p>
                    <p class="sure-number">领取码（核销码）<span class="text">{{item.sureNumber}}</span></p>
                    <p class="jifen">
                      <span>积分：<span class="fen-text">{{item.jifen}}</span></span>
                      <span class="number-text">×{{item.total}}</span> 
                    </p>
                  </div>
                </div>
                <div class="bottom">
                  <span v-if="item.state != '1'" class="bottom-btn" @click="sureRecive">确认收货</span>
                  <span v-else class="bottom-btn sureRecive">已收货</span>
                </div>
              </li>
              <li v-if="isReachBottom" class="pull-loading"><van-loading type="spinner" size="20px" color="#1989fa" /></li>
              <li v-if="isBottom" class="bottom-line">-- 亲，已经到最后了--</li>
            </ul>
            <div v-else class="empty">
              <img src="/static/images/empty-icon.png" alt="空">
              <p class="empty-tips">暂时还没有可补课级哦</p>
            </div>
          </scroll-view>
        </van-tab>
        <van-tab title="兑换记录">
          <scroll-view :scroll-y="true" enable-back-to-top lower-threshold="-50" class="scroll-height" @scrolltolower="lower2" :scroll-top="0">
            <ul class="change-content" v-if="list.length">
              <li class="change-items" v-for="(item,index) in list" :key="index">
                <div class="middle">兑换时间：{{item.dateTime}}</div>
                <div class="top">
                  <img class="head-img" :src="item.src" alt="头像">
                  <div class="class-infor">
                    <p class="class-name overflow-tow">{{item.title}}</p>
                    <p class="sure-number">领取码（核销码）<span class="text">{{item.sureNumber}}</span></p>
                    <p class="jifen">
                      <span>积分：<span class="fen-text">{{item.jifen}}</span></span>
                      <span class="number-text">×{{item.total}}</span> 
                    </p>
                  </div>
                </div>
                <div class="bottom">
                  <span v-if="item.state != '1'" class="bottom-btn" @click="sureRecive">确认收货</span>
                  <span v-else class="bottom-btn sureRecive">已收货</span>
                </div>
              </li>
              <li v-if="isReachBottom" class="pull-loading"><van-loading type="spinner" size="20px" color="#1989fa" /></li>
              <li v-if="isBottom" class="bottom-line">-- 亲，已经到最后了--</li>
            </ul>
            <div v-else class="empty">
              <img src="/static/images/empty-icon.png" alt="空">
              <p class="empty-tips">暂时还没有可补课级哦</p>
            </div>
          </scroll-view>
        </van-tab>
      </van-tabs>
    </div>
    <div v-else class="init-loading"><van-loading type="spinner" color="#1989fa" /></div>
  </div>
</template>

<script>
import store from '../../store/globalStore'
export default {
  data() {
    return {
      initLoading: true, // 初始加载
      isBottom: false, // 是否加载完全部数据
      isReachBottom: false, // 是否显示加载状态
      active: 0,
      list: [
        {state: 1, src: 'https://img.yzcdn.cn/vant/cat.jpeg', total: "1", jifen: '4456', title: '课程名称课程名称课程课程课课程名称课程名称课程课程课课程名称课程名称课程课程课', sureNumber: '69194685', dateTime:'2019年12月12日'}
        ,{state: 2, src: 'https://img.yzcdn.cn/vant/cat.jpeg', total: "1", jifen: '4456', title: '课程名称课程名称课程课程课课程名称课程名称课程课程课课程名称课程名称课程课程课', sureNumber: '69194685', dateTime:'2019年12月12日'}
        ,{state: 2, src: 'https://img.yzcdn.cn/vant/cat.jpeg', total: "1", jifen: '4456', title: '课程名称课程名称课程课程课课程名称课程名称课程课程课课程名称课程名称课程课程课', sureNumber: '69194685', dateTime:'2019年12月12日'}
        ,{state: 2, src: 'https://img.yzcdn.cn/vant/cat.jpeg', total: "1", jifen: '4456', title: '课程名称课程名称课程课程课课程名称课程名称课程课程课课程名称课程名称课程课程课', sureNumber: '69194685', dateTime:'2019年12月12日'}
      ]
    }
  },
  onShow() {
    this.getShiftWorkList();
  },
  methods: {
    // 获取列表
    getShiftWorkList() {
      this.$fetch.shiftWork()
      .then(res=>{
        this.initLoading = false;
      }).catch(err=>{
        this.initLoading = false;
      })
    },
    // 切换tabs
    changeTabs(e) {
      this.active = e.mp.detail.index;
    },
    // 确认收货
    sureRecive() {

    },
    // 上拉加载
    lower() {
      let that = this;
      that.isReachBottom = true;
      wx.showNavigationBarLoading() //在标题栏中显示加载
      if(that.list.length<10){
        setTimeout(function(){
          that.isReachBottom = false;
          wx.hideNavigationBarLoading() //完成停止加载
          //模拟加载
          that.list = [...that.list,...that.list]
        },1500);
      } else {
        that.isReachBottom = false;
        that.isBottom = true;
        wx.hideNavigationBarLoading() //完成停止加载
      }
    },
    lower2() {
      let that = this;
      that.isReachBottom = true;
      wx.showNavigationBarLoading() //在标题栏中显示加载
      if(that.list.length<10){
        setTimeout(function(){
          that.isReachBottom = false;
          wx.hideNavigationBarLoading() //完成停止加载
          //模拟加载
          that.list = [...that.list,...that.list]
        },1500);
      } else {
        that.isReachBottom = false;
        that.isBottom = true;
        wx.hideNavigationBarLoading() //完成停止加载
      }
    },
  },
}
</script>

<style lang="less" scope>
.change-class{
  width: 100%;
  min-height: 100vh;
  .scroll-height{
    height: calc(~"100vh - 40px")
  }
  .van-tab--active{
    .van-ellipsis{
      color: #00B7EE;
    }
  }
  .change-content{
    width: 100%;
    .change-items{
      width: 100%;
      background: #fff;
      position: relative;
      overflow: hidden;
      margin-bottom: 10px;
      &:last-child{
        border-bottom: 0;
      }
      .top{
        width: 100%;
        padding: 12px 15px;
        box-sizing: border-box;
        background: #F1F2F7;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .middle{
        width: 100%;
        padding: 10px 15px;
        box-sizing: border-box;
        font-size: 12px;
        color: #8D8D8D;
      }
      .bottom{
        width: 100%;
        padding: 8px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: row-reverse;
        .bottom-btn{
          width: 84px;
          text-align: center;
          padding: 8px 0;
          border: 0.5px solid rgba(0,184,238,1);
          border-radius:  14px;
          font-size: 14px;
          color: #00B8EE;
          background: #fff;
          margin-right: 15px;
          &.sureRecive{
            border: 0.5px solid rgba(194,194,194,1);
            color: #C2C2C2;
          }
        }
      }
      .head-img{
        min-width: 80px;
        width: 80px;
        height: 80px;
        display: block;
      }
      .zhuanban-state{
        width: 50px;
        height: 16px;
        display: flex;
        align-items: center;
        text-indent: 6px;
        font-size: 10px;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        &::after{
          content: "";
          width: 20px;
          height: 20px;
          background: #fff;
          position: absolute;
          top: 5px;
          right: -10px;
          transform: rotate(45deg);
        }
      }
      .class-infor{
        height: 80px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20px;
        .class-name{
          width: 100%;
          font-size: 14px;
          color: #333;
        }
        .class-top{
          display: flex;
          width: 100%;
          font-size: 14px;
          font-weight: bold;
        }
        .sure-number{
          font-size: 12px;
          color: #666;
          .text{
            color: #00B8EE;
          }
        }
        .jifen{
          width: 100%;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #333;
          .fen-text{
            color: #FF4E6C;
            font-size: 14px;
            font-weight: bold;
          }
          .number-text{
            font-size: 14px;
            color: #999;
            font-weight: bold;
          }
        }
        .change-btn{
          display: flex;
          justify-content: center;
          align-items: center;
          min-width: 54px;
          height: 20px;
          text-align: center;
          font-size: 14px;
          color: #fff;
          margin-left: 12px;
          background: #00B7EE;
          border-radius: 10px;
        }
      }
    }
  }
}
</style>
